<template>
  <div
    id="music-list"
    :style="{
      'margin-bottom': Object.keys(getMusic).length == 0 ? '0' : '66px',
    }"
  >
    <div id="top">
      <div class="left">
        <van-image :src="sheetDetail.coverImgUrl" fit="contain" />
      </div>
      <div class="right">
        {{ sheetDetail.name }}
      </div>
    </div>
    <div id="middle">
      <van-loading size="24px" vertical class="loading" v-show="loading"
        >加载中...</van-loading
      >
      <div
        v-for="(item, index) in songsDetais"
        :key="item.id"
        class="song-item"
        @click="clickSong(item)"
      >
        <div class="left">{{ index + 1 }}</div>
        <div class="center">
          <div>
            <!-- 歌名 -->
            {{ item.name }}
          </div>
          <div>
            <!-- 歌手-专辑名 -->
            {{ item.arName }} - {{ item.alName }}
            <!-- </div> -->
          </div>
        </div>
        <div class="right">
          <van-icon name="play-circle-o" size="25" color="#888888" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ifTabBar } from "@/common/mixin";
import { mapGetters } from "vuex";
import { getSheetSongs, getSongsDetail, getSongsUrl } from "@/api/music";
export default {
  data() {
    return {
      sheetDetail: {}, //歌单详情
      songIds: [], //歌曲ids
      songsDetais: [], //歌曲详情s
      loading: true,
      // music: {}, //当前播放音乐
      // audio: [], //音乐数组
    };
  },
  // components: { aplayer },
  computed: {
    ...mapGetters(["getMusic", "getAudio"]),
  },
  mixins: [ifTabBar],
  created() {
    console.log("getMusic", this.getMusic);
    this.getSheetDetail(); // 获取歌单详情（同步）
    //获取歌曲ids（api）
    this.getSheetSongs().then(() => {
      // 获取歌曲详情
      this.getSongsDetais();
      console.log("songsDetais", this.songsDetais);
    });
  },
  methods: {
    getSheetDetail() {
      this.sheetDetail = this.$route.query.item;
    },
    async getSheetSongs() {
      const id = this.sheetDetail.id;
      // api（获取歌曲ids）
      await getSheetSongs(id).then((res) => {
        let ids = res.playlist.trackIds;
        this.songIds = ids.map((item) => {
          return item.id;
        });
      });
    },
    getSongsDetais() {
      let songsDetaisTemp = [];
      const temp = new Promise((resolve, rej) => {
        let length = 0;
        this.songIds.forEach((item) => {
          // api（获取歌曲详情s）
          getSongsDetail(item).then((res) => {
            songsDetaisTemp.push(res.songs);
            length += 1;
            if (length == this.songIds.length) {
              resolve();
            }
          });
        });
      });
      temp.then(() => {
        console.log(songsDetaisTemp);
        // 处理歌曲详情数据
        this.songsDetais = songsDetaisTemp.map((item) => {
          // name歌曲名字，alName专辑名字，arName歌手名字，img专辑封面
          let arName = item[0].ar.map((item) => {
            return item.name;
          });
          arName = arName.join("/");
          this.loading = false;
          return {
            id: item[0].id,
            name: item[0].name,
            alName: item[0].al.name,
            arName,
            img: item[0].al.picUrl,
          };
        });
        // console.log(this.songsDetais);
      });
    },
    clickSong(item) {
      getSongsUrl(item.id).then((res) => {
        let ifadd = [];
        const url = res.data[0].url;
        const song = {
          id: item.id,
          title: item.name,
          artist: item.arName,
          url,
          pic: item.img,
        };
        this.$store.commit("playMusic", song);
        this.$bus.$emit("playMusic", song);
        // 判断列表里是否有音乐
        if (this.getAudio.length != 0) {
          ifadd = this.getAudio.filter((item) => {
            return item.id == song.id;
          });
          if (ifadd.length != 0) return;
        }
        this.$store.commit("musicLstAdd", song);
      });
    },
  },
};
</script>

<style lang='less' scoped>
#music-list {
  // margin-bottom: 66px;
}
#top {
  height: 27%;
  background-image: linear-gradient(#e66465, #9198e5);
  display: flex;
  .left {
    width: 60%;
    display: flex;
    align-items: center;
    .van-image {
      height: 80%;
    }
  }
  .right {
    width: 40%;
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
  }
}
#middle {
  position: relative;
  min-height: 70vh;
  .song-item {
    padding: 10px;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    display: flex;
    align-items: center;
    .left {
      flex: 0.1;
    }
    .center {
      flex: 1.2;
      div:nth-child(1) {
        font-size: 17px;
      }
      div:nth-child(2) {
        font-size: 12px;
        color: #888;
        margin-top: 2px;
      }
    }
    .right {
      flex: 0.1;
    }
  }
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
// .aplayer {
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   margin: 0;
//   z-index: 1;
// }
</style>
